import React from 'react';
import ReactDOM from 'react-dom';
import '../../static/tero/navigation_bar.less'
import $ from 'jquery'


class navigation_bar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            index: 0,
            flag: false,
            base:[]
        }
    }
    componentWillMount() {
        this.setState({
            names: this.props.names,
            base:this.props.names,
        })
    }
    adminPop() {
        let flag = true;
        if ($('#admin')) {
            $('#admin').click(function () {
                let scale = 0;
                scale = flag ? 0 : '500px';
                $('.nav_b_right').css('transform', 'translateX(' + scale + ')');
                flag = !flag;
            })
        }
    }
    componentDidMount() {
        this.adminPop()

    }
    componentDidUpdate() {
        this.adminPop()
    }
    toggle(index) {
        this.setState({
            index: index
        })
    }
    search(e) {
        this.setState({
            base: this.state.names.filter((item) => {
                return item.includes(e.target.value)
            })
        })
    }
    render() {
        return (  
        <div className='bar'>
            <div className='tero_nav'>
            <div className='left'><img src={require('../../static/image/left_icon.png')} alt="" /></div>
            <div className='right'><img src={require('../../static/image/gd.png')} alt="" onClick={() => {
                this.setState({
                    flag: !this.state.flag
                })
            }} />
                <div className={this.state.flag ? 'right_son active' : 'right_son'}>
                <div className='infoo'>
                        <ul>
                            <li>
                               <div className='infoo-left'>
                               <img src={require('../../static/image/Avatar.png')} alt=""/>
                               </div>
                                <div className='infoo-right'>
                                   <div className='infoo-right-top'>
                                   <h4>明松</h4>
                                    <img src={require('../../static/image/man.png')} alt=""/>
                                   </div>                                    
                                   <p>100米以内</p>                          
                                </div>
                            </li>
                            <li>                                    
                              <p>地区</p>                                   
                              <span>南京，江苏</span>
                            </li>
                            <li>                                    
                              <p>地区</p>                                   
                              <span>南京，江苏</span>
                            </li>
                            <li>
                                <p>相册</p>
                                <ul>
                                    <li>
                                        <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                        <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                        <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                        <img src={require('../../static/image/tero_nav_one.png')} alt=""/>
                                    </li>
                                </ul>
                                <strong>  >  </strong>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul className='nav'>
                {this.state.names.map((item, index) => {
                    return (<li key={index} onClick={() => { this.toggle(index) }} className={this.state.index == index ? 'active_li' : ''}>{item}</li>)
                })}

            </ul>
        </div>
        </div>
        )
    }
}
export default navigation_bar